<template>
	<a-spin :spinning="confirmLoading">
		<JFormContainer :disabled="disabled">
			<template #detail>
				<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
					name="TbFileForm">
					<a-row>
						<a-col :span="24">
							<a-form-item label="是否是文件夹" v-bind="validateInfos.izFolder" id="TbFileForm-izFolder"
								name="izFolder">
								<j-dict-select-tag type='radio' v-model:value="formData.izFolder" dictCode="yn"
									placeholder="请选择是否是文件夹" allow-clear disabled />
							</a-form-item>
						</a-col>
						<a-col :span="24">
							<a-form-item label="是否星标" v-bind="validateInfos.izStar" id="TbFileForm-izStar"
								name="izStar">
								<j-dict-select-tag type='radio' v-model:value="formData.izStar" dictCode="yn"
									placeholder="请选择是否星标" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="24">
							<a-form-item label="文件名称" v-bind="validateInfos.fileName" id="TbFileForm-fileName"
								name="fileName" v-if="formData.izFolder =='1'">
								<a-input v-model:value="formData.fileName" placeholder="请输入文件名称" allow-clear></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="24">
							<a-upload-dragger :headers="headers" v-model:fileList="fileList" name="file"
								:multiple="true" :action="uploadUrl" @change="handleChange">
								<p class="ant-upload-drag-icon">
									<inbox-outlined></inbox-outlined>
								</p>
								<p class="ant-upload-text">拖拽文件到这里</p>
							</a-upload-dragger>
						</a-col>
					</a-row>
				</a-form>
			</template>
		</JFormContainer>
	</a-spin>
</template>

<script lang="ts" setup>
	import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
	import { defHttp } from '/@/utils/http/axios';
	import { useMessage } from '/@/hooks/web/useMessage';
	import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
	import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
	import { uploadUrl } from '/@/api/common/api';
	import { getValueType } from '/@/utils';
	import { saveOrUpdate, save, insertBatch } from '../TbFile.api';
	import { Form, UploadChangeParam } from 'ant-design-vue';
	import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
	import { InboxOutlined, CloseOutlined } from '@ant-design/icons-vue';
	import { getFileAccessHttpUrl, getHeaders } from '/@/utils/common/compUtils';
	const props = defineProps({
		formDisabled: { type: Boolean, default: false },
		formData: { type: Object, default: () => ({}) },
		formBpm: { type: Boolean, default: true }
	});
	const formRef = ref();
	const useForm = Form.useForm;
	const emit = defineEmits(['register', 'ok']);
	const formData = reactive<Record<string, any>>({
		id: '',
		fileName: '',
		fileSize: '',
		fileType: '',
		izFolder: '',
		izRootFolder: '',
		izStar: '',
		downCount: '',
		enableDown: '',
		enableUpdat: '',
		readCount: '',
		realname: '',
		sharePerms: '',
		shareUrl: '',
		storeType: '',
		userData: '',
		zipName: '',
		url: '',
	});
	const { createMessage } = useMessage();
	const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
	const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
	const confirmLoading = ref<boolean>(false);
	//表单验证
	const validatorRules = reactive({
	});
	const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
	const headers = getHeaders();
	const fileList : any = ref([]);


	// 表单禁用
	const disabled = computed(() => {
		if (props.formBpm === true) {
			if (props.formData.disabled === false) {
				return false;
			} else {
				return true;
			}
		}
		return props.formDisabled;
	});

	const handleChange = (info : UploadChangeParam) => {
		const status = info.file.status;
		if (status !== 'uploading') {
			console.log(info.file, info.fileList);
		}
		if (status === 'done') {
			console.log(`${info.file.name} file uploaded successfully.`)

			console.log(`========fileList==============` + JSON.stringify(fileList.value))
			//addFile(info.file);
			//createMessage.success(`${info.file.name} file uploaded successfully.`);
		} else if (status === 'error') {
			console.log(`${info.file.name} file upload failed.`)
			createMessage.warning(`${info.file.name} file upload failed.`);
		}
	};


	/**
	 * 新增
	 */
	function add() {
		edit({});
	}

	/**
	 * 编辑
	 */
	function edit(record) {
		nextTick(() => {
			resetFields();
			const tmpData = {};
			Object.keys(formData).forEach((key) => {
				if (record.hasOwnProperty(key)) {
					tmpData[key] = record[key]
				}
			})
			//赋值
			Object.assign(formData, tmpData);
		});
	}

	/**
	 * 提交数据
	 */
	async function save() {
		try {
			// 触发表单验证
			await validate();
		} catch ({ errorFields }) {
			if (errorFields) {
				const firstField = errorFields[0];
				if (firstField) {
					formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
				}
			}
			return Promise.reject(errorFields);
		}
		confirmLoading.value = true;
		const isUpdate = ref<boolean>(false);
		//时间格式化
		let model = formData;
		if (model.id) {
			isUpdate.value = true;
		}
		//循环数据
		for (let data in model) {
			//如果该数据是数组并且是字符串类型
			if (model[data] instanceof Array) {
				let valueType = getValueType(formRef.value.getProps, data);
				//如果是字符串类型的需要变成以逗号分割的字符串
				if (valueType === 'string') {
					model[data] = model[data].join(',');
				}
			}
		}
		await saveOrUpdate(model, isUpdate.value)
			.then((res) => {
				if (res.success) {
					createMessage.success(res.message);
					emit('ok');
				} else {
					createMessage.warning(res.message);
				}
			})
			.finally(() => {
				confirmLoading.value = false;
			});
	}

	function saveBatch() {
		let formDataList : any = ref([]);
		fileList.value.forEach(item => {
			formDataList.value.push({
				fileName: item.name,
				fileType: item.type,
				fileSize: item.size,
				url: item.response.message,

				izFolder: formData.izFolder,
				izStar: formData.izStar,
			})
		})

		insertBatch(formDataList.value).then((res) => {
			if (res.success) {
				createMessage.success(res.message);
				emit('ok');
			} else {
				createMessage.warning(res.message);
			}
		})
			.finally(() => {
				confirmLoading.value = false;
			});
	}

	function submitForm() {
		/* 0是文件，1是文件夹*/
		if (formData.izFolder == "0") {
			saveBatch();
		} else if (formData.izFolder == "1") {
			save();
		}
	}


	defineExpose({
		add,
		edit,
		submitForm,
		saveBatch,
	});
</script>

<style lang="less" scoped>
	.antd-modal-form {
		padding: 14px;
	}
</style>